<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.姓名案例-watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			#root {
				display: flex;
				flex-direction: column;
			}

			#child {
				display: flex;
				margin-top: 10px;
				flex-direction: row;
			}
		</style>
	</head>
	<!-- 
		computed和watch之间的区别:
		1.computed能完成的功能，watch都可以完成。
		2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。
		两个重要的小原则:
		1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
		2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数等)，最好写成箭头函数，
		这样this的指向才是vm或组件实例对象。
	 -->
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<div id="child">
				姓：<input type="text" v-model="firstName" />
			</div>
			<div id="child">
				名：<input type="text" v-model="lastName" />
			</div>
			全名：{{fullName}}<br />
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
				fullName: '张-三'
			},
			computed: {

			},
			watch: {
				firstName(val) {
					this.fullName = val + '-' + this.lastName
				},
				lastName(val) {
					//注意延迟函数使用箭头函数
					/**
					 * 
					 *1.这些是定时器setTimeout所指定的函数。这个函数是不是vue所管理的？不是。
					 * ()=>{
						this.fullName=this.firstName+'-'+val
					 *	}
					 * 2.定时器setTimeout确实是在vue所管理的一个函数,名字叫lastName中开启的。
					 * 但定时器所指定的回调是不受vue控制的。是浏览器定时器模块控制的。最后时间到也是js引擎
					 * 帮你调用的。也就是说到点了不是vue帮你调用的setTimeout所指定的函数。
					 * 这种地方一定写成箭头函数。
					 * 
					 * vue所管理的一个函数,名字叫lastName中,
					 */
					//setTimeout(function(){
					/**
					 * 如果是箭头函数，它就没了自己的this,没有自己的this,就会往外找,
					 * 就会找到lastName函数的this,lastName函数就是vue管理的普通函数。
					 */
					setTimeout(() => {
						console.log(this) //如果是普通函数，这个this就是windown
						this.fullName = this.firstName + '-' + val
					}, 1000)
				}
			}
		})
	</script>
</html>
<!-- 
计算属性，依赖返回值，比如fullName函数的返回值。
watch里面可使用异步任务，计算属性没法用。
 -->